<template>
    <div class='publiclesson'>
      <div class="titleinfo">
        <h2>公开课</h2>
      </div>
      <!--公开课轮播-->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="free-content">
              <div class="free-cont1" style="margin-left: -0.24rem;">
                <p>【中药一】一小时搞定中药制剂的辨别</p>
                <div class="free-yuyue"><span class="free-time">19:20</span><span class="free-stylus">已预约</span></div>
              </div >
              <div class="free-cont1" style="background: #9dcc29;">
                <p>【中药一】一小时搞定中药制剂的辨别</p>
                <div class="free-yuyue"><span class="free-time">19:20</span><span class="free-stylus">已预约</span></div>
              </div>
            </div>
            <div class="more">
              更多 >
            </div>
          </div>
        </div>
      </div>

    </div>
</template>
<script>

  import Swiper from '../../static/js/swiper.min'
  import '../assets/css/swiper.min.css'
    export default {
        name: 'hello',
        data() {
            return {
                count: '',
            }
        },
        created() {

        },
        mounted() {
          var swiper = new Swiper('.swiper-container', {
            pagination: {
              el: '.swiper-pagination',
            },
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
          });
        },
        methods: {}
    }
</script>
<style scoped>
    .publiclesson {
      margin-top: 0.15rem;
      background: white;
    }
    .more{
      padding: .2rem .3rem;
      height: .5rem;
      line-height: .5rem;
      text-align: center;
      color: #999;
      font-size: .24rem;
    }
    .free-content{
      display: flex;
      flex-direction: row;
    }
    .free-time{
      width: 40%;
      text-align: center;
      color: #00c2d1;
      display: inline-block;
    }
    .free-stylus{
      width: 60%;
      text-align: center;
      color: white;
      display: inline-block;
      border-radius: .19rem;
      background: #09828b;
      position: relative;
      top: -0.02rem;
    }
    .free-yuyue{
      width: 2.6rem;
      height: .38rem;
      line-height: .38rem;
      background: #fff;
      border-radius: .19rem;
      margin-top: 0.5rem;
    }
    .free-cont1{
      width: 3.1rem;
      background: #00c2d1;
      border-radius: .2rem;
      color: #fff;
      font-size: .28rem;
      padding: .3rem .2rem;
      margin-left: 0.3rem;
    }
    .titleinfo{
      padding: .3rem 0;
      text-align: center;
    }
    .titleinfo h2{
      font-size: .32rem;
      line-height: 100%;
      color: #333;
      font-weight: 700;
    }
    .swiper-container {
      width: 100%;
    }
    .swiper-slide {
      font-size: 18px;
      background: #fff;
      display: flex;
      flex-direction: column;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>
